<template lang="html">
  <div id="deal-wrap">
    <section class="deal-img">
      <img :src="require('../../images/rent/dealDone.png')">
    </section>
    <h3 class="deal-title">恭喜你，付款成功<br>请注意拿好钥匙，尽快入住</h3>
    <section class="deal-form">
      <ul class="deal-ul">
        <li class="deal-item">
          <span class="item-name">交易时间：</span>
          <span class="item-value">{{format($route.query.timeStamp)}}</span>
        </li>
        <li class="deal-item">
          <span class="item-name">支付方式：</span>
          <span class="item-value">{{$route.query.payMethod}}</span>
        </li>
        <li class="deal-item">
          <span class="item-name">交易单号：</span>
          <span class="item-value">{{$route.query.orderNumber}}</span>
        </li>
      </ul>
    </section>
    <section class="deal-btns">
      <x-button type="primary" link="/user">进入个人中心</x-button>
      <!-- <x-button type="primary" link="/myContract">我的合同</x-button> -->
    </section>
  </div>
</template>

<script>
export default {
  methods: {
    format (val) {
      let date = val.replace(/-/g, '/')
      return new Date(date * 1000).Format('yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";

  #deal-wrap{
    height: 100vh;
    background: #fff;
    ul, li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .deal-img{
      padding-top: 50px; /* 100/40 */
      margin-bottom: 50px; /* 40/40 */
      text-align: center;
      img{
        width: 125px; /* 250/40 */
        height: 125px; /* 250/40 */
        vertical-align: top;
        border-radius: 50%;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, .2); /* 20/40 */
      }
    }
    .deal-title{
      text-align: center;
      font-size: 17px; /* 34/40 */
      color: #0068d9;
      margin-bottom: 25px; /* 50/40 */
    }
    .deal-form{
      padding: 0 40px; /* 80/40 */
      margin-bottom: 50px; /* 100/40 */
    }
    .deal-item{
      display: flex;
      justify-content: space-between;
      font-size: @font-size-13; /* 26/40 */
      line-height: 25px; /* 50/40 */
      color: @color-999999;
    }
    .item-value{
      color: @color-333333;
    }
    .deal-btns{
      padding: 0 12px; /* 25/40 */
    }
  }
</style>
